//
// Slider styles (to be used with sliders.js)
// --------------------------------------------------

// Width of slider
.slider {
  width: 100%;
}

// Outer wrapper for slider
.slider {
  overflow: hidden;

  // Inner wrapper for slider (width of all slides together)
  .slide-group {
    position: relative;
    font-size: 0; // Remove spaces from inline-block children
    white-space: nowrap;
    @include transition(all 0s linear);

    // Individual slide
    .slide {
      display: inline-block;
      width: 100%;
      height: 100%;
      font-size: 14px;
      vertical-align: top; // Ensure that li always aligns to top

      > img {
        display: block;
      }
    }
  }

  .slider-indicators {
    position: absolute;
    bottom: 5px;
    left: 50%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: -30%;
    text-align: center;
    list-style: none;

    > li {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: 0 3px;
      text-indent: -999px;
      cursor: pointer;
      background-color: #ccc;
      border-radius: 10px;

      &.active {
        background-color: $negative-color;
      }
    }
      
  }
}
